<template>
	<view class="home">
		<u-navbar @leftClick="leftClick" placeholder :safeAreaInsetTop="true" title="添加闸门" :fixed="true"
			bgColor="#292F36" leftIconColor="#FFE66D" :titleStyle="titleStyle">
		</u-navbar>
		<view class="game-form-container">
			<!-- 			<view class="game-header">
				<text class="title">闸门基本信息设置</text>
				<view class="title-decoration"></view>
			</view> -->

			<form class="game-form">
				<view class="form-item" v-for="item in formItems" :key="item.key">
					<view class="form-flx">
						<view class="label">{{item.label}}</view>
						<view class="">
							<view class="inputflx">
								<input
									v-if="!item.selectIF && !item.latlonIF && !item.driving && item.label != '电机减速比:' && !item.bumen"
									class="input" :type="item.type || 'text'" :class="[item.width ? 'miniw' : 'maxw']"
									v-model="formData[item.key]" :placeholder="item.placeholder"
									@focus="inputFocus(item.key)" @blur="inputBlur" />
								<text style="margin-left:20rpx;color: #FFE66D;" v-if="item.danwei">cm</text> 
								<!-- 测试按钮 -->
								<button class="game-tton" hover-class="butt-hover"
									v-if="['speedRatio', 'idleHeight'].includes(item.key)"
									@click="startTheEquipment(item.key)">
									测试
								</button>
							</view>
							<!-- 渠道 -->
							<view class="qudclass" v-if="item.key == 'channel'">
								<view class="latlonflx">
									<uni-data-select @change="selectFn" v-model="formData.channel" :localdata="rangequd" :clear="true"></uni-data-select>
								</view>
								<view class="latbutt" @click="channelListqd">
									管理
								</view>
							</view>
							<!-- 部门 -->
							<view class="qudclass" v-if="item.key == 'department'">
								<view class="latlonflx">
									<uni-data-select v-model="formData.department" :localdata="rangebum" :clear="true"></uni-data-select>
								</view>
								<view class="latbutt" @click="channelListbum">
									管理
								</view>
							</view>
							<!-- 经纬度 -->
							<view class="latlonclass" v-if="item.latlonIF">
								<view class="latlonflx">
									<input class="input" type="number" placeholder="经度" v-model="formData.longitude" />
									<view class="" style="width: 20rpx;"></view>
									<input class="input" type="number" placeholder="纬度" v-model="formData.latitude" />
								</view>
								<view class="latbutt" @click="latbutFn">
									获取经纬度
								</view>
							</view>
							<!-- 螺杆导程 -->
							<view class=""
								style="text-align: center;font-size: 35rpx;line-height: 50rpx;color: #FF6B6B;"
								v-if="item.disabled">
								<view class="">
									<input class="input" type="number" placeholder="螺杆导程"
										v-model="formData.speedRatio" />
								</view>
<!-- 								<view class="">
									启闭机摇动 1 圈的升降高度，可按螺距换算，可实测获取。
								</view> -->
							</view>
							<!-- 减速比 -->
							<view class="" v-if="item.label == '电机减速比:'">
								<view class="reductiflx">
									<view class="text">
										1 :
									</view>
									<input class="input" type="number" placeholder="减速比"
										v-model="formData.reductionRatio" />
								</view>
							</view>
						</view>

						<!-- 下拉 -->
						<view class="data-select " v-if="item.selectIF">
							<view class="select">
								<uni-data-select v-model="formData.motorSpeed" :clear="false" :localdata="range"
									@change="changeselect"></uni-data-select>
							</view> 
							<!-- 							<view class="text">
								输出转速：{{formData.machineShaft}} 转/分
							</view> -->
						</view>
						<!-- 驱动方向 -->
						<view class="" v-if="item.driving">
							<uni-data-checkbox v-model="formData.drivingDirection" selectedColor="#4ECDC4"
								:localdata="radio" mode="tag"></uni-data-checkbox>
						</view>
					</view>
<!-- 					<view class="textzham" v-if="item.selectIF">
						大闸门、有水压、高负载的用低速档，小闸门或空载的可用高速档
					</view>
					<view class="textzham" v-if="item.driving">
						仅用于双侧输出轴启闭机
					</view>
					<view class="textzham" v-if="item.label == '启闭速比:'">
						启闭机摇动1圈的升降高度，可按螺距换算，可实测获取
					</view>
					<view class="textzham" v-if="item.label == '空转间隙:'">
						升降转换时的空转高度，需实测获取，或启闭时手动补偿
					</view> -->
					<view class="input-decoration" :class="{active: activeInput === item.key}"></view>
				</view>

				<!-- 				<view class="button-group">
					<button form-type="submit" class="game-button primary" hover-class="button-hover">
						<text>确认设置</text>
						<view class="button-effect"></view>
					</button>
					<button form-type="reset" class="game-button secondary" hover-class="button-hover">
						<text>重置内容</text>
						<view class="button-effect"></view>
					</button>
				</view> -->
				<view class="button-group">
					<button form-type="submit" class="game-button primary" hover-class="button-hover"
						:disabled="isSubmitting" @click="handleSubmit">
						<text>确认设置</text>
						<view class="button-effect"></view>
						<view v-if="isSubmitting" class="loading-spinner"></view>
					</button>
				</view>
			</form>

			<view class="game-footer">
				<view class="footer-decoration"></view>
				<text class="hint">* 设置后将立即生效</text>
			</view>
			<!-- 百转弹窗 -->
			<uni-drawer ref="showLeft" mode="left" :width="360">
				<view class="showclas">
					<rotationalabsolute ref="childComp" :message="formData" @childEvent="handleChildEvent">
					</rotationalabsolute>
					<button class="showcbutt" @click="closeDrawer">返回</button>
					<!-- rotationalRelative rotationalAbsolute -->
				</view>
			</uni-drawer>
			<!-- 空转弹窗 -->
			<uni-drawer ref="showBullet" mode="left" :width="360">
				<view class="showclas">
					<rotationalrelative ref="childBullet" :message="formData" @childBullet="handleChildBullet">
					</rotationalrelative>
					<button class="showcbutt" @click="closeBullet">返回</button>
					<!-- rotationalRelative rotationalAbsolute -->
				</view>
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	import rotationalabsolute from "@/components/rotationalAbsolute.vue"
	import rotationalrelative from "@/components/rotationalRelative.vue"
	export default {
		components: {
			rotationalabsolute,
			rotationalrelative
		},
		data() {
			return {
				radio: [{
					text: '顺时针升',
					value: 1
				}, {
					text: '逆时针升',
					value: 2
				}],
				isSubmitting: false, // 新增状态变量
				isResetting: false, // 新增状态变量
				lastClickTime: 0, // 新增状态变量
				titleStyle: {
					color: "#FFE66D"
				},
				activeInput: null,
				formItems: [{
						key: 'name',
						label: '闸门名称:',
						placeholder: '输入闸门名称',
						type: 'text',
						disabled: false, //螺杆导程
						width: false, //样式宽度
						selectIF: false, //默认速度
						latlonIF: false, //经纬度
						driving: false, //启闭方向
						danwei: false, //单位
						bumen: false, //部门样式
					},
					{
						key: 'gateNum',
						label: '闸门编号:',
						placeholder: '编号',
						type: 'text',
						disabled: false, //螺杆导程
						width: false, //样式宽度
						selectIF: false, //默认速度
						latlonIF: false, //经纬度
						driving: false, //启闭方向
						danwei: false, //单位
						bumen: false, //部门样式
					},
					{
						key: 'channel',
						label: '所属渠道:',
						placeholder: '渠道',
						type: 'text',
						disabled: false, //螺杆导程
						width: true, //样式宽度
						selectIF: false, //默认速度
						latlonIF: false, //经纬度
						driving: false, //启闭方向
						danwei: false, //单位
						bumen: true, //部门样式

					},
					{
						key: 'department',
						label: '所属部门:',
						placeholder: '部门',
						type: 'text',
						disabled: false, //螺杆导程
						width: true, //样式宽度
						selectIF: false, //默认速度
						latlonIF: false, //经纬度
						driving: false, //启闭方向
						danwei: false, //单位
						bumen: true, //部门样式
					},
					{
						key: 'latlon',
						label: '坐落位置:',
						placeholder: '经纬度',
						type: 'number',
						disabled: false, //螺杆导程
						width: false, //样式宽度
						selectIF: false, //默认速度
						latlonIF: true, //经纬度
						driving: false, //启闭方向
						danwei: false, //单位
						bumen: false, //部门样式
					},
					{
						key: 'upperLimit',
						label: '最大开度:',
						placeholder: '单位：cm',
						type: 'number',
						disabled: false, //螺杆导程
						width: true, //样式宽度
						selectIF: false, //默认速度
						latlonIF: false, //经纬度
						driving: false, //启闭方向
						danwei: true, //单位
						bumen: false, //部门样式
					},
					{
						key: 'initialPosition',
						label: '当前开度:',
						placeholder: '单位：cm',
						type: 'number',
						disabled: false, //螺杆导程
						width: true, //样式宽度
						selectIF: false, //默认速度
						latlonIF: false, //经纬度
						driving: false, //启闭方向
						danwei: true, //单位
						bumen: false, //部门样式
					}, {
						key: 'speedRatio',
						label: '螺杆导程:',
						placeholder: '单位：cm/圈',
						type: 'number',
						disabled: false, //螺杆导程
						width: true, //样式宽度
						selectIF: false, //默认速度
						latlonIF: false, //经纬度
						driving: false, //启闭方向
						danwei: true, //单位
						bumen: false, //部门样式
					}, {
						key: 'idleHeight',
						label: '空转间隙:',
						placeholder: '单位：cm',
						type: 'number',
						disabled: false, //螺杆导程
						width: true, //样式宽度
						selectIF: false, //默认速度
						latlonIF: false, //经纬度
						driving: false, //启闭方向
						danwei: true, //单位
						bumen: false, //部门样式
					}, {
						key: 'motorSpeed',
						label: '电驱转速:',
						placeholder: '120',
						type: 'number',
						disabled: false, //螺杆导程
						width: false, //样式宽度
						selectIF: true, //默认速度
						latlonIF: false, //经纬度
						driving: false, //启闭方向
						danwei: false, //单位
						bumen: false, //部门样式
					}, {
						key: 'drivingDirection',
						label: '电驱方向:',
						placeholder: '驱动方向',
						type: 'number',
						disabled: false, //螺杆导程
						width: false, //样式宽度
						selectIF: false, //默认速度
						latlonIF: false, //经纬度
						driving: true, //启闭方向
						danwei: false, //单位
						bumen: false, //部门样式
					},
					{
						key: 'reductionRatio',
						label: '电机减速比:',
						placeholder: '例：如减速比为1:10,填10',
						type: 'number',
						disabled: false, //螺杆导程
						width: true, //样式宽度
						selectIF: false, //默认速度
						latlonIF: false, //经纬度
						driving: false, //启闭方向
						danwei: false, //单位
						bumen: false, //部门样式
					}
				],
				range: [{
						value: 600,
						text: "60圈/分钟"
					},
					{
						value: 1200,
						text: "120圈/分钟"
					},
					{
						value: 1800,
						text: "180圈/分钟"
					},
					{
						value: 2400,
						text: "240圈/分钟"
					}
				],
				rangequd: [],
				rangebum: [],
				formData: {
					id: '', //id
					name: '', //名称
					gateNum: '', //编号
					channel: '', //渠道
					department: '', //部门
					longitude: '', //经度
					latitude: '', //纬度
					upperLimit: '', //上限位
					reductionRatio: '10', //减速比
					initialPosition: '', //初始位置
					idleHeight: '', //升降空转高度
					speedRatio: '', //螺杆导程
					motorSpeed: 1200, //下拉转速
					machineShaft: '120', //机械轴转速
					drivingDirection: 1, //启闭机驱动方向
					clickThePopUpWindow: null, //弹窗判断空转还是百转
				},
				createAType: '' //创建类型
			}
		},
		onLoad(option) {
			// id
			this.formData.id = option.id
			// 创建类型
			this.createAType = option.createAType
			console.log(option);
		},
		onShow() {
			this.rangequd = this.vuex_qudao
			this.rangebum = this.vuex_bumen
			// 经纬度
			if (this.createAType == "创建") {
				this.latbutFn()
			}
			// 创建
			if (this.createAType == "修改") {
				this.formData = this.vuex_initPosiItem
			}
			// 初始化蓝牙
			if (this.vuex_deviceId != '') {
				// 执行子组件 百转
				if (this.clickThePopUpWindow == 'speedRatio') {
					this.$nextTick(() => {
						this.$refs.childComp.initialMotor()
					});
				}
				if (this.clickThePopUpWindow == 'idleHeight') {
					// 执行子组件 空转
					this.$nextTick(() => {
						this.$refs.childBullet.initialMotor()
					});
				}
			}
		},
		methods: {
			// 下拉渠道
			selectFn(){
				console.log('渠道',this.formData.channel);
			},
			// 创建渠道
			channelListqd(){
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: '/pages/waterSupplyManagement/channelList'
				});

			},
			channelListbum(){
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: '/pages/waterSupplyManagement/departmentList'
				});
			},
			// 百转子组件
			handleChildEvent(data) {
				this.formData.speedRatio = data.rotationalSpeedRatio
				console.log('百转子组件:', data)
			},
			// 空转子组件
			handleChildBullet(data) {
				this.formData.idleHeight = data.idleHeight
				console.log('空转子组件:', data)
			},
			// 启动设备
			startTheEquipment(e) {
				this.clickThePopUpWindow = e
				// 百转启动
				if (e == 'speedRatio') {
					this.showDrawer()
				}
				// 空转启动
				if (e == 'idleHeight') {
					this.showBullet()
				}
			},
			// 百转弹窗
			// 打开
			showDrawer() {
				this.$refs.showLeft.open();
				if (this.vuex_deviceId != '') {
					this.$nextTick(() => {
						this.$refs.childComp.initialMotor()
					});
				}
			},
			// 关闭
			closeDrawer() {
				this.$refs.showLeft.close();
			},
			// 空转弹窗
			// 打开
			showBullet() {
				this.$refs.showBullet.open();
				if (this.vuex_deviceId != '') {
					this.$nextTick(() => {
						this.$refs.childBullet.initialMotor()
					});
				}
			},
			// 关闭
			closeBullet() {
				this.$refs.showBullet.close();
			},
			// 获取经纬度
			latbutFn() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.formData.longitude = res.longitude
						this.formData.latitude = res.latitude
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			},
			// 输出转速
			changeselect(e) {
				this.formData.machineShaft = e / 10
			},
			inputFocus(key) {
				this.activeInput = key
			},
			inputBlur() {
				this.activeInput = null
			},
			validateForm() {
				const form = this.formData;

				// 验证规则配置
				const rules = {
					id: value => !!value, // 非空字符串
					name: value => !!value,
					gateNum: value => !!value,
					// channel: value => !!value,
					// department: value => !!value,
					longitude: value => !!value, // 经度
					latitude: value => !!value, // 纬度
					upperLimit: value => Number(value) > 0,
					reductionRatio: value => Number(value) > 0,
					initialPosition: value => value == 0 || Number(value) > 0,
					speedRatio: value => Number(value) > 0,
					// idleHeight: value => Number(value) > 0,
					motorSpeed: value => Number(value) > 0,
					machineShaft: value => Number(value) > 0,
					drivingDirection: value => [1, 2].includes(Number(value)), // 假设1和2是有效值
				};

				// 执行验证
				const errors = [];
				Object.entries(rules).forEach(([field, validate]) => {
					if (!validate(form[field])) {
						errors.push(this.getFieldName(field) + ' 不符合要求');
					}
				});

				if (errors.length > 0) {
					uni.showToast({
						title: `请检查以下字段:\n${errors.join('\n')}`,
						icon: 'none',
						duration: 3000
					});
					return false;
				}

				return true;
			},

			// 字段名称映射（用于错误提示）
			getFieldName(field) {
				const names = {
					id: 'ID',
					name: '名称',
					gateNum: '编号',
					channel: '渠道',
					department: '部门',
					longitude: '经度',
					latitude: '纬度',
					upperLimit: '最大提闸高度',
					reductionRatio: '设备减速比',
					initialPosition: '初始闸门高度',
					idleHeight: '升降空转高度',
					speedRatio: '螺杆导程',
					motorSpeed: '默认启闭速度',
					machineShaft: '机械轴转速',
					drivingDirection: '启闭机驱动方向',
				};
				return names[field] || field;
			},
			// 防抖提交处理
			handleSubmit() {
				const now = Date.now();
				if (now - this.lastClickTime < 1000) {
					uni.showToast({
						title: '操作太频繁啦!',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				if (!this.validateForm()) return;
				this.lastClickTime = now;
				this.isSubmitting = true;
				// 1秒后重置状态
				setTimeout(() => {
					this.isSubmitting = false;
				}, 1000);
				if (this.createAType == "创建") {
					// 创建
					this.formSubmit();
				} else {
					// 修改
					this.modifySubmit(this.formData.id)
				}
			},
			// 创建
			formSubmit(e) {
				console.log('提交表单');
				uni.showToast({
					title: '闸门创建成功!',
					icon: 'none',
					duration: 500
				})

				let datalist = []
				datalist = this.vuex_initPosiVX
				datalist.unshift(this.formData)
				uni.$u.vuex('vuex_initPosiVX', datalist)

				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 600)
			},
			// 修改
			modifySubmit(e) {
				console.log('提交表单');
				uni.showToast({
					title: '闸门修改成功!',
					icon: 'none',
					duration: 500
				})
				// 修改
				this.updateItem(this.formData)
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 600)
			},
			// 返回
			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			updateItem(updatedItem) {
				let datalist = []
				datalist = this.vuex_initPosiVX
				const index = datalist.findIndex(item => item.id === updatedItem.id);
				if (index !== -1) {
					datalist.splice(index, 1, updatedItem);
					uni.$u.vuex('vuex_initPosiVX', datalist)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 颜色变量 */
	$primary-color: #FF6B6B;
	$secondary-color: #4ECDC4;
	$dark-color: #292F36;
	$light-color: #F7FFF7;
	$accent-color: #FFE66D;

	/* 表单容器 */
	.home {
		min-height: 100vh;
		background-color: #292F36;

		.game-form-container {
			padding: 20rpx;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 6rpx;
				background: linear-gradient(90deg, $primary-color, $secondary-color, $accent-color);
				z-index: 1;
			}

			// 螺杆导程弹窗
			.showclas {
				padding: 50rpx 20rpx 20rpx 20rpx;

				.showcbutt {
					margin: 20rpx;
					height: 100rpx;
					line-height: 100rpx;
					border: none;
					border-radius: 12rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #212221;
					margin-bottom: 30rpx;
					overflow: hidden;
					transition: all 0.3s ease;
					z-index: 1;
					background-color: #FFE66D;
				}

				.showcbutt:active {
					transform: translateY(6rpx);
				}

			}
		}

		/* 头部样式 */
		.game-header {
			margin-bottom: 50rpx;
			text-align: center;
			position: relative;

			.title {
				font-size: 40rpx;
				font-weight: bold;
				color: $light-color;
				letter-spacing: 2rpx;
			}

			.title-decoration {
				height: 4rpx;
				width: 120rpx;
				background: $accent-color;
				margin: 15rpx auto;
				border-radius: 4rpx;
			}
		}

		/* 表单项目样式 */
		.game-form {
			.form-item {
				margin-bottom: 10rpx;
				position: relative;

				.form-flx {
					display: flex;

					.label {
						width: 240rpx;
						font-size: 35rpx;
						line-height: 70rpx;
						color: #FFE66D;
						// background-color: #42afa6;
					}

					.inputflx {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.input {
							height: 65rpx;
							padding: 0 30rpx;
							background: rgba($light-color, 0.1);
							border: 2rpx solid rgba($light-color, 0.3);
							border-radius: 10rpx;
							color: $light-color;
							font-size: 28rpx;
							transition: all 0.3s ease;

							&:focus {
								background: rgba($light-color, 0.15);
								border-color: $accent-color;
							}
						}

						.miniw {
							width: 220rpx;
						}

						.maxw {
							width: 400rpx;
						}

						.game-tton {
							font-size: 30rpx;
							padding: 0rpx 15rpx;
							margin-left: 20rpx;
							background-color: #4ECDC4;
							color: #F7FFF7;
							transition: all 0.2s ease;
						}

						.butt-hover {
							transform: scale(0.9);
							background-color: #42afa6;
						}

					}

					// 减速比
					.reductiflx {
						display: flex;
						align-items: center;
						justify-content: center;

						.text {
							width: 100rpx;
							text-align: center;
							font-size: 45rpx;
							line-height: 70rpx;
							color: #4ECDC4;
						}

						.input {
							width: 200rpx;
							height: 65rpx;
							padding: 0 30rpx;
							background: rgba($light-color, 0.1);
							border: 2rpx solid rgba($light-color, 0.3);
							border-radius: 10rpx;
							color: $light-color;
							font-size: 28rpx;
							transition: width 0.5s ease;

							&.active {
								width: 99%;
							}
						}
					}

					// 渠道
					.qudclass {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.latlonflx {
							width: 340rpx;
							border-radius: 10rpx;
							background-color: #f4f4f4;
						}

						.latbutt {
							font-size: 30rpx;
							line-height: 70rpx;
							padding: 0rpx 15rpx;
							margin-left: 20rpx;
							border-radius: 10rpx;
							text-align: center;
							background-color: #4ECDC4;
							color: #F7FFF7;
							transition: all 0.2s ease;
						}

						.latbutt:active {
							transform: scale(0.9);
							background-color: #42afa6;
						}
					}

					// 经纬度
					.latlonclass {

						.latlonflx {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.input {
								width: 180rpx;
								height: 65rpx;
								padding: 0 20rpx;
								background: rgba($light-color, 0.1);
								border: 2rpx solid rgba($light-color, 0.3);
								border-radius: 10rpx;
								color: $light-color;
								font-size: 28rpx;
							}
						}

						.latbutt {
							font-size: 26rpx;
							padding: 5rpx;
							margin: 10rpx;
							border-radius: 10rpx;
							text-align: center;
							background: #FFE66D;
							color: #212221;
							transition: all 0.2s ease;
						}

						.latbutt:active {
							background: #dcbb59;
							color: #F7FFF7;
							transform: translateY(6rpx);
						}
					}

					.data-select {
						.select {
							width: 440rpx;
							border-radius: 10rpx;
							background-color: #f4f4f4;
						}

						.text {
							text-align: center;
							font-size: 35rpx;
							color: #FF6B6B;
						}
					}

				}

				.textzham {
					font-size: 24rpx;
					color: #F7FFF7;
					text-align: center;
				}

				.input-decoration {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 0;
					height: 3rpx;
					background: $primary-color;
					transition: width 0.5s ease;

					&.active {
						width: 99%;
					}
				}
			}
		}

		/* 按钮组样式 */
		.button-group {
			margin-top: 30rpx;

			.game-button {
				position: relative;
				height: 100rpx;
				line-height: 100rpx;
				border: none;
				border-radius: 12rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: $dark-color;
				margin-bottom: 30rpx;
				overflow: hidden;
				transition: all 0.3s ease;
				z-index: 1;

				text {
					position: relative;
					z-index: 2;
				}

				.button-effect {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: linear-gradient(45deg, transparent 25%, rgba(white, 0.3) 50%, transparent 75%);
					background-size: 400% 400%;
					opacity: 0;
					transition: all 0.6s ease;
					z-index: 1;
				}

				&.primary {
					background: $accent-color;
				}

				&.secondary {
					background: $secondary-color;
				}

				&:active {
					transform: translateY(6rpx);

					.button-effect {
						opacity: 1;
						animation: buttonShine 0.8s ease;
					}
				}
			}

			.button-hover {
				opacity: 0.7;
			}
		}

		/* 底部样式 */
		.game-footer {
			text-align: center;

			.footer-decoration {
				height: 2rpx;
				width: 100%;
				background: rgba($light-color, 0.2);
			}

			.hint {
				font-size: 24rpx;
				color: rgba($light-color, 0.6);
			}
		}

		// 防抖
		.game-button {
			position: relative;

			/* 加载指示器 */
			.loading-spinner {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 40rpx;
				height: 40rpx;
				border: 4rpx solid rgba(white, 0.3);
				border-top-color: white;
				border-radius: 50%;
				animation: spin 0.8s linear infinite;
			}

			/* 禁用状态样式 */
			&[disabled] {
				opacity: 0.7;
				transform: none !important;

				.button-effect {
					display: none;
				}
			}
		}

		/* 旋转动画 */
		@keyframes spin {
			to {
				transform: translateY(-50%) rotate(360deg);
			}
		}

		/* 动画效果 */
		@keyframes buttonShine {
			0% {
				background-position: 100% 50%;
			}

			100% {
				background-position: 0% 50%;
			}
		}
	}
</style>
<style>
	page {
		background-color: '#292F36';
	}
</style>